<%@page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/>
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link type="text/css" rel="stylesheet"
          href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
    <script type="text/javascript">


        $(function () {
            //给创建按钮提添加函数事件
            $("#createActivityBtn").click(function () {
                //先把模态窗口弹出来
                $("#createActivityModal").modal("show");
            });

            //给保存按钮添加单击事件
            $("#saveCreateActivityBtn").click(function () {
                //收集参数
                var owner = $("#create-marketActivityOwner").val();

                console.log($('#edit-marketActivityOwner').val());
                console.log($('#edit-marketActivityOwner option:selected').val());
                console.log(owner);
                var name = $.trim($("#create-marketActivityName").val());//trim去除前后空格
                var startDate = $("#create-startDate").val();
                var endDate = $("#create-endDate").val();
                var cost = $("#create-cost").val();
                var description = $("#create-description").val();

                if (owner == "") {
                    alert("所属者不能为空")
                    return;
                }

                if (name == "") {
                    alert("名称不能为空")
                    return;
                }

                if (startDate != "" && endDate != "") {

                    if (endDate < startDate) {
                        alert("结束日期不能比开始日期小")
                        return;
                    }
                }
                /*
                * 这里要使用一个正则表达式来判断一个非正整数的数字
                * 简单了解表达式语法(但能从晚上复制来的就不要自己写)：
                * 1.语法,语法:定义在覅富川的匹配模式，可以用来判断指定的具体字符串是否符合匹配模式
                * 2.语法通则:
                *    1) //:在js中定义也给曾泽表达式.  var regExp=/.../
                *    2)^:匹配字符串的开头位置
                *      $:匹配字符串的结尾
                *    3)[]:匹配指定字符串啊集中的以为字符。var regExp=/^[abc]$/;
                *                      匹配26个 字母 var regExp=/^[a-z]$/;
                *    4){}:匹配次数.比如一个字符串有五个匹配字符  var regExp=/^[abc]{5}$/;
                *           它也可以{5,10}  就是匹配5到10次
                *    5)特殊符号:
                *       \d:匹配一位数字,相当于[0-9]
                *       \D:匹配一位非数字
                *       \w:匹配所有字符，包括字母、数字、下划线
                *       \W:匹配非字符，除了字母、数字、下划线之外的字符
                *
                *        *:匹配0次或者多次,相当于{0,}
                *        +:匹配1次或者多次,相当于{1,}
                *        ?:匹配0次或者1次，相当于{0,1}
                * */
                var regExp = /^(([1-9]\d*)|0)$/;

                if (!regExp.test(cost)) {
                    alert("成本只能为非负整数")
                    return;
                }

                $.ajax(
                    {
                        url: "workbench/activity/saveCreateActivity",
                        data: {
                            //这里切记要和controller里的参数名字一直,我们这个controller那边是个实体类
                            owner: owner,
                            name: name,
                            startDate: startDate,
                            endDate: endDate,
                            cost: cost,
                            description: description,
                        },
                        type: "post",
                        dataType: 'json',
                        //success代表下载数据成功后执行的操作
                        success: function (data) {
                            //如果code为1则controller执行成功
                            if (data.code == 1) {
                                //成功之后，关闭模态窗口，刷新市场活动列，

                                $("#createActivityModal").modal("hide");


                                // 显示第一页数据，保持每页下面是条数不变
                                queryActivityByConditionForPage(1, $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
                            } else {
                                //创建失败，提示信息床架你失败，模态窗口不关闭，市场活动也不刷新
                                alert(data.message);
                                //模态窗口不关闭
                                $("#createActivityModal").modal("show");//可以不写

                            }
                        }
                    }
                )
            });


            //当市场活动主页面加载完成，查询所有数据一次
            queryActivityByConditionForPage(1, 10);

            //给查询按钮添加单击事件
            $("#queryActivityBtn").click(function () {
                queryActivityByConditionForPage(1, $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
            });
            //给"全选按钮添加单击事件"
            $("#checkAll").click(function () {
                // if (this.checked == true) {
                //     //如果"全选"按钮是选中状态，则列表中所有checkbox都选中
                //     $("#tBody input[type='checkbox']").prop("checked", true);
                // } else {
                //     $("#tBody input[type='checkbox']").prop("checked", false);
                // }
                $("#tBody input[type='checkbox']").prop("checked", this.checked);
            });
            $("#tBody").on("click", "input[type='checkbox']", function () {
                //如果列表中的所有checkbox都选中，则“全选” 按钮也选中
                if ($("tBody input[type='checkbox']").size() ==
                    $("#tBody input[type='checkbox']:checked").size()
                ) {
                    $("#checkAll").prop("checked", true);
                } else {
                    //如果列表中的所有checkbox至少有一个没选中，则"全选"按钮也取消
                    $("#checkAll").prop("checked", false);
                }
            })


            /*            $("tBody input[type='checkbox']").click(function () {
                            //如果列表中的所有checkbox都选中，则“全选” 按钮也选中
                            if ($("tBody input[type='checkbox']").size() ==
                                $("#tBody input[type='checkbox']:checked").size()
                            ) {
                                $("#checkAll").prop("checked", true);
                            } else {
                                //如果列表中的所有checkbox至少有一个没选中，则"全选"按钮也取消
                                $("#checkAll").prop("checked", false);

                            }
                        })*/
            //给删除按钮添加事件
            $("#deleteActivityBtn").click(function () {
                    //收集参数
                    //获取列表中所有被选中的checkbox
                    var checkedIds = $("#tBody input[type='checkbox']:checked");
                    if (checkedIds.size() == 0) {
                        alert("请选择要删除的市场活动")
                        return;
                    }


                    //  搞个弹框提示信息
                    if (window.confirm("确定删除吗?")) {
                        var ids = "";
                        $.each(checkedIds, function () {
                            //id=xxxx&id=xxxxx&id=xxxxx&
                            ids += "id=" + this.value + "&";
                        })
                        // if (window.confirm("确定删除吗?")) {
                        //     var ids = [];
                        //
                        //     $.each(checkedIds, function () {
                        //         //id=xxxx&id=xxxxx&id=xxxxx&
                        //         ids += this.value;
                        //     });
                        //把最后一个&删除
                        ids = ids.substr(0, ids.length - 1);

                        //向后台发送异步请求

                        $.ajax({
                            url: "workbench/activity/deleteActivityIds",
                            // data: {_method: "DELETE", id: JSON.stringify(checkedIds)},
                            data: ids,
                            type: 'POST',
                            dataType: 'json',
                            //处理响应
                            success: function (data) {
                                //解析json，渲染页面
                                if (data.code == "1") {
                                    //刷新市场活动列表，希纳是第一页数据，保持每页显示条数不变
                                    queryActivityByConditionForPage(1, $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
                                } else {
                                    //删除失败,弹出提示信息
                                    alert(data.message);
                                }

                            }


                        })
                    }
                }
            );


            //给修改按钮添加事件
            $("#editActivityBtn").click(function (data) {
                //获取列表中被选中的checkbox
                var checkedIds = $("#tBody input[type='checkbox']:checked");
                if (checkedIds.size() == 0) {
                    alert("请选择要修改的市场活动");
                    return;
                }
                if (checkedIds.size() > 1) {
                    alert("每次只能修改一条数据");
                    return;
                }
                var id = checkedIds.val();

                //拿到数据提交给controller
                $.ajax({
                    url: "workbench/activity/queryActivityById",
                    type: "post",
                    data: {
                        id: id,
                    },
                    dataType: "json",
                    //处理响应信息
                    success: function (data) {
                        console.log(data.description);
                        // 解析controller层传递的数据,渲染模态窗口
                        //就是把市场活动要修改的信息显示在修改的模态窗口上
                        $("#edit-id").val(data.id);
                        $("#edit-marketActivityOwner").val(data.owner);
                        $("#edit-marketActivityName").val(data.name);
                        $("#edit-startTime").val(data.startDate);
                        $("#edit-endTime").val(data.endDate);
                        $("#edit-cost").val(data.cost);
                        $("#edit-description").val(data.description);
                        //如果拿到数据则,弹出模态窗口
                        $("#editActivityModal").modal("show");
                    }
                });
            });

            //当点击修改模态中的更新按钮
            $("#saveEditActivityBtn").click(function () {
                //收集新写的参数
                //收集参数
                var id = $("#edit-id").val();
                var owner = $("#edit-marketActivityOwner").val();
                var name = $.trim($("#edit-marketActivityName").val());//trim去除前后空格
                var startDate = $("#edit-startTime").val();
                var endDate = $("#edit-endTime").val();
                var cost = $.trim($("#edit-cost").val());
                var description = $("#edit-description").val();
                if (owner == "") {
                    alert("所属者不能为空")
                    return;
                }
                if (name == "") {
                    alert("名称不能为空")
                    return;
                }
                if (startDate != "" && endDate != "") {
                    if (endDate < startDate) {
                        alert("结束日期不能比开始日期小")
                        return;
                    }
                }
                var regExp = /^(([1-9]\d*)|0)$/;

                if (!regExp.test(cost)) {
                    alert("成本只能为非负整数")
                    return;
                }
                $.ajax({
                    url: 'workbench/activity/saveEditActivity',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: id,
                        owner: owner,
                        name: name,
                        startDate: startDate,
                        endDate: endDate,
                        cost: cost,
                        description: description,
                    },
                    //接收前台数据
                    success: function (data) {
                        if (data.code > 0) {
                            //添加成功,关闭模态窗口
                            $("#editActivityModal").modal("hide");
                            //成功后页面保持不变,但数据修改，也就是再次进行数据查询本页
                            queryActivityByConditionForPage($("#demo_pag1").bs_pagination('getOption', 'currentPage'), $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
                        } else {
                            //添加失败,不关闭模态窗口，弹出信息
                            alert(data.message);

                            $("#editActivityModal").modal("show");
                        }
                    }

                })

            });

            //给"批量导出"按钮添加单击事件
            $("#exportActivityAllBtn").click(function () {
                window.location.href = "workbench/activity/exportAllActivitys";
            });
            //给“选择导出”按钮添加单击事件
            $("#exportActivityXzBtn").click(function () {
                //获取列表中所有被选中的checkbox
                var checkedIds = $("#tBody input[type='checkbox']:checked");
                if (checkedIds.size() == 0) {
                    alert("请选择要下载的数据")
                    return;
                }
                var ids = "id=";
                $.each(checkedIds, function () {
                    //id=xxxx&id=xxxxx&id=xxxxx&
                    ids += this.value + ",";
                });

                ids = ids.substr(0, ids.length - 1);

                window.location.href = "workbench/activity/exportAllById?" + ids;
            });

            //导入按钮添加点击事件
            //给模态窗口中的"导入"按钮添加点击事件
            $("#importActivityBtn").click(function () {
                //收集参数
                var activityFileName = $("#activityFile").val();//我们可以拿到这个文件的文件名，然后做一个表单验证
                //我们先需要截取看看这个是否是个xls文件，(下面那个大概意思就是截取字符串,然后截取字符串中的最后也给点后面的 所有内容)
                var suffix = activityFileName.substr(activityFileName.lastIndexOf(".") + 1);
                suffix.toLowerCase();//全部转换为小写
                if (suffix != "xls") {
                    alert("只支持xls文件");
                    return;
                }
                var activityFile = $("#activityFile")[0].files[0];
                //   alert(activityFile.size);//测试单位,是字节
                if (activityFile.size >= 5242880) {
                    alert("文件大小不能超过5MB");
                    return;
                }
                //FormData是ajax提供的接口，可以模拟键值对向后台提交参数;
                //FormData最大的又是是不但能提交文本数据，还能提交二进制数据
                var formData = new FormData();
                formData.append("activityFile", activityFile)//参数名要和controller中形参名字一致
                formData.append("ceshi", "测试数据")
                //发送请求
                $.ajax({
                    url: 'workbench/activity/importActivity',
                    //processData设置ajax向后台提交参数之前，是否把参数统一转换成字符串,默认true
                    processData: false,//这个就是为了让文件不转换为字符串，否则会报错
                    //contentType设置ajax向后台提交参数之前，是否把所有的参数统一按urlencoded编码:true---为是，false为不是，默认为true
                    contentType: false,
                    data: formData,
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == 1) {
                            //提示成功
                            alert("成功导入" + data.retData + "条数据");
                            //关闭模态窗口
                            $("#importActivityModal").modal("hide");
                            //刷新页面
                            queryActivityByConditionForPage(1, $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
                        } else {
                            //失败,提示信息
                            alert(data.message);
                            //模态窗口不关闭
                            $("#importActivityModal").modal("show");

                        }
                    }
                });
            });
        });


        //封装函数 查询分页....
        function queryActivityByConditionForPage(pageNo, pageSize) {
            console.log(pageNo + "页码");
            console.log(pageSize + "显示条数")
            //访问首页数据查询，以及分页
            //收集参数
            var name = $("#query-name").val();
            var owner = $("#query-owner").val();
            var startDate = $("#query-startDate").val();
            var endDate = $("#query-endDate").val();
            //当前页数，默认第一页，数据每页默认为10条
            // var pageNo = 0;
            // //当前每页数据,
            // var pageSize = 10;


            //发送请求

            $.ajax({
                url: "workbench/activity/indexBody",
                data: {
                    name: name,
                    owner: owner,
                    startDate: startDate,
                    endDate: endDate,
                    pageNo: pageNo,
                    pageSize: pageSize,
                },
                Type: 'post',
                dataType: 'json',
                success: function (data) {
                    console.log("数据接收成功");
                    //显示总条数(因为我们把前端写的注释掉了，用的自己的工具所以页面不需要传总条数了)
                    //   $("#totalRowsB").text(data.i);
                    console.log(data.i);
                    //遍历数据
                    var htmlStr = "";
                    $.each(data.activities, function (index, obj) {
                        htmlStr += "<tr class=\"active\">";
                        htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";
                        htmlStr += "<td><a style=\"text-decoration: none; cursor: pointer;\" " +
                            "onclick=\"window.location.href='workbench/activity/detail?id="+obj.id+"';\">" + obj.name + "</a></td>";

                        htmlStr += "<td>" + obj.owner + "</td>";
                        htmlStr += "<td>" + obj.startDate + "</td>";
                        htmlStr += "<td>" + obj.endDate + "</td>";
                        htmlStr += "</tr>";
                    });
                    $("#tBody").html(htmlStr);
                    //每次翻页 取消全选按钮选择
                    $("#checkAll").prop("checked", false);
                    //计算总页数
                    var totalPages = 1;
                    //   var totalPages = (data.i +pageSize - 1) / pageSize;
                    if (data.i % pageSize == 0) {
                        totalPages = data.i / pageSize;
                    } else {
                        totalPages = parseInt(data.i / pageSize) + 1;
                        /*parseInt 获取小数的整数部分*/
                    }
                    console.log(totalPages);
                    $(function () {
                        $("#demo_pag1").bs_pagination({
                            currentPage: pageNo,//当前页码，相当于pageNo  必须为动态的 ，谁调用传的是多少就是多少
                            rowsPerPage: pageSize,//每页显示条数,相当于pageSize  必须为动态的 ，谁调用传的是多少就是多少
                            totalPages: totalPages,//总的页数（必填项） 这个总的页数，就是总条数被总条数除掉
                            totalRows: data.i,//总条数,一般数据库查出来的多少条 data.i是数据库查的
                            visiblePageLinks: 5,//最多可以显示的卡片
                            showGoToPage: true,//是否显示"跳转到"部分，默认true---显示
                            showRowsPerPage: true,//是否显示"每页显示条数"部分，默认true---显示
                            showRowsInfo: true,//是否显示记录的信息，默认true--显示
                            showRowsDefaultInfo: true,
                            //我们这里这个是每次切换页面才会执行所以，里面那个代码不会死循环
                            //每次返回切换页号之后的pageNo和pageSize.其中我们pageObj对象就相当于上面那个函数
                            onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked
                                //这个就是当用户每次切换页面的时候执行什么代码.每次切换页码，都会自动触发本函数
                                //我们可以直接通过pageObj调用里面的参数
                                // alert(pageObj.currentPage);
                                // alert(pageObj.rowsPerPage);
                                queryActivityByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
                            },
                        });

                    });


                }

            });
        }


    </script>
</head>
<body>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-marketActivityOwner">
                                <c:forEach items="${users}" var="user">
                                    <%--id是根据数据的id存入到哪里--%>
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-marketActivityName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control" id="create-startDate">
                        </div>
                        <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control" id="create-endDate">
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-description"></textarea>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
            </div>
        </div>
    </div>
</div>





<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <input type="hidden" id="edit-id">
                    <div class="form-group">
                        <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-marketActivityOwner">
                                <c:forEach items="${users}" var="user">
                                    <%--id是根据数据的id存入到哪里--%>
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control" id="edit-startTime" value="2020-10-10">
                        </div>
                        <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control" id="edit-endTime" value="2020-10-20">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-cost" value="5,000">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-description">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveEditActivityBtn">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
            </div>
            <div class="modal-body" style="height: 350px;">
                <div style="position: relative;top: 20px; left: 50px;">
                    请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
                </div>
                <div style="position: relative;top: 40px; left: 50px;">
                    <input type="file" id="activityFile">
                </div>
                <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;">
                    <h3>重要提示</h3>
                    <ul>
                        <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                        <li>给定文件的第一行将视为字段名。</li>
                        <li>请确认您的文件大小不超过5MB。</li>
                        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                        <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                        <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="query-name">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="query-owner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control" type="text" id="query-startDate"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control" type="text" id="query-endDate">
                    </div>
                </div>

                <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" id="createActivityBtn">
                    <span class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button type="button" class="btn btn-default" id="editActivityBtn"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-danger" id="deleteActivityBtn"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal">
                    <span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）
                </button>
                <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）
                </button>
                <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）
                </button>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="checkAll"/></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="tBody">
                <%--                <tr class="active">--%>
                <%--                    <td><input type="checkbox"/></td>--%>
                <%--                    <td><a style="text-decoration: none; cursor: pointer;"--%>
                <%--                           onclick="window.location.href='detail.jsp';">发传单</a></td>--%>
                <%--                    <td>zhangsan</td>--%>
                <%--                    <td>2020-10-10</td>--%>
                <%--                    <td>2020-10-20</td>--%>
                <%--                </tr>--%>
                <%--                <tr class="active">--%>
                <%--                    <td><input type="checkbox"/></td>--%>
                <%--                    <td><a style="text-decoration: none; cursor: pointer;"--%>
                <%--                           onclick="window.location.href='detail.jsp';">发传单</a></td>--%>
                <%--                    <td>zhangsan</td>--%>
                <%--                    <td>2020-10-10</td>--%>
                <%--                    <td>2020-10-20</td>--%>
                <%--                </tr>--%>
                </tbody>
            </table>
            <div id="demo_pag1"></div>
        </div>

        <%--        使用自己的翻页功能 ，这里用插件实现--%>


        <%--        <div style="height: 50px; position: relative;top: 30px;">--%>
        <%--            <div>--%>
        <%--                <button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录--%>
        <%--                </button>--%>
        <%--            </div>--%>
        <%--            <div class="btn-group" style="position: relative;top: -34px; left: 110px;">--%>
        <%--                <button type="button" class="btn btn-default" style="cursor: default;">显示</button>--%>
        <%--                <div class="btn-group">--%>
        <%--                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">--%>
        <%--                        10--%>
        <%--                        <span class="caret"></span>--%>
        <%--                    </button>--%>
        <%--                    <ul class="dropdown-menu" role="menu">--%>
        <%--                        <li><a href="#">20</a></li>--%>
        <%--                        <li><a href="#">30</a></li>--%>
        <%--                    </ul>--%>
        <%--                </div>--%>
        <%--                <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>--%>
        <%--            </div>--%>
        <%--            <div style="position: relative;top: -88px; left: 285px;">--%>
        <%--                <nav>--%>
        <%--                    <ul class="pagination">--%>
        <%--                        <li class="disabled"><a href="#">首页</a></li>--%>
        <%--                        <li class="disabled"><a href="#">上一页</a></li>--%>
        <%--                        <li class="active"><a href="#">1</a></li>--%>
        <%--                        <li><a href="#">2</a></li>--%>
        <%--                        <li><a href="#">3</a></li>--%>
        <%--                        <li><a href="#">4</a></li>--%>
        <%--                        <li><a href="#">5</a></li>--%>
        <%--                        <li><a href="#">下一页</a></li>--%>
        <%--                        <li class="disabled"><a href="#">末页</a></li>--%>
        <%--                    </ul>--%>
        <%--                </nav>--%>
        <%--            </div>--%>
        <%--        </div>--%>

    </div>

</div>
</body>
</html>